<template>
  <view class="pay-result">
    <view class="result-icon">
      <image src="/static/success.png" mode="widthFix"></image>
    </view>
    <view class="result-text">支付成功！</view>
    <view class="order-info" v-if="outTradeNo">
      <text>商户订单号：{{ outTradeNo }}</text>
      <text>支付金额：¥{{ totalAmount }}</text>
    </view>
    <!-- 点击按钮直接调用全局API -->
    <button @click="goBack" class="back-btn">返回充值页</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const outTradeNo = ref('');
const totalAmount = ref('');

onLoad((query) => {
  outTradeNo.value = query.out_trade_no || '未知订单号';
  totalAmount.value = query.total_amount || '0.00';
});

// 直接使用全局 uni.navigateTo 或 uni.redirectTo
const goBack = () => {
  // 方案：强制重定向到充值页（无视路由历史）
  uni.redirectTo({
    url: '/pages/recharge/recharge', // 确保路径正确
    success: () => {
      console.log('成功返回充值页');
    },
    fail: (err) => {
      console.error('返回失败:', err);
      // 终极方案：如果重定向失败，直接重启页面
      uni.reLaunch({
        url: '/pages/recharge/recharge'
      });
    }
  });
};
</script>

<style scoped>
/* 样式保持不变 */
.pay-result {
  padding: 50rpx;
  text-align: center;
  background-color: #fff;
  min-height: 100vh;
}

.result-icon {
  margin: 100rpx 0;
}

.result-icon image {
  width: 200rpx;
  height: 200rpx;
}

.result-text {
  font-size: 36rpx;
  margin: 50rpx 0;
  color: #333;
  font-weight: bold;
}

.order-info {
  margin: 50rpx 0;
  text-align: left;
  background: #f5f5f5;
  padding: 30rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 2;
}

.order-info text {
  display: block;
}

.back-btn {
  margin-top: 100rpx;
  background-color: #007AFF;
  color: white;
  width: 80%;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 34rpx;
  border-radius: 8rpx;
}
</style>